import React, { Component } from 'react'

export default class setStateDemo extends Component {

  state = {
    count:0
  }

  addOne = ()=>{
    // 这个是setState传递对象
    this.setState({
      count:this.state.count+1
    },()=>{
      console.log('异步更新状态完成，是在render之后才执行的',this.state.count)
    })
    console.log('值为：',this.state.count)
  }

  addOneFun = ()=>{
    /*
      这个是setState传递一个函数时候的使用
        函数的两个形参分别就是 state 和 props

        返回值一定要是一个要修改的对象

      总的来说 对象式的setState式函数式的ssetState的语法糖

      同时主要setSatet更新式异步更新  可以再给一个回调函数
        回调函数执行的时机是：  state更新完毕 同时重新执行了 render 之后才会执行的
    */ 
    this.setState((state,props)=>{
      console.log(state,props)
      return {
        count:state.count+1
      }
    },()=>{
      console.log('异步更新状态完成，是在render之后才执行的',this.state.count)

    })
  }

  render() {
    return (
      <div>
        <h2>当前的值是：{this.state.count}</h2>
        <button onClick={this.addOne}>setState传递对象+1</button>
        <button onClick={this.addOneFun}>setState传递函数+1</button>
      </div>
    )
  }
}
